<script setup>
import {clickStatus, pageList, removeById} from '@/api/user'
import {onMounted, ref} from "vue";
import {Delete, User} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus";
import EditComponent from "@/components/User/EditComponent.vue";

let list = ref([])
let pageData = ref({
  total: 0,
  pageNum: 1,
  pageSize: 10,
  username: "",
  nickname: "",
  phone: ""
})
let selectList = ref([]);
let getPage = () => {
  pageList(pageData.value).then(data => {
    list.value = data.data.list;
    pageData.value.total = parseInt(data.data.total);
  })
}
onMounted(() => {
  getPage()
})
let handleCurrentChange = (size) => {
  pageData.value.pageNum = size;
  getPage()
}
let handleSizeChange = (size) => {
  pageData.value.pageSize = size;
  getPage()
}
/**
 * 被选中..
 * @param arr
 */
let handleSelectionChange = (arr) => {
  selectList.value = []
  arr.map(itm => {
    selectList.value.push(itm.id)
  })
  console.log(selectList.value.toString())
}

let userStatus = (id, status) => {
  clickStatus(id, status).then(() => {
    console.log("跳！")
    //刷新当前页面
    getPage()

  })
}
let select = () => {
  getPage();
}
let remove = (id) => {
  ElMessageBox.confirm(
      '确定删除吗',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        removeById(selectList.value.toString().length == 0 ? id : selectList.value.toString()).then(res => {
          ElMessage({
            type: 'success',
            message: '删除成功！',
          })
          getPage()
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消',
        })
      })
}
let addUser = () => {
  ElMessage.success("添加用户")
}
</script>
<template>
  <div>
    <div style="margin-left: 20px">
      <h1>用户管理</h1>
    </div>
    <!--
     TODO 查询条件
     -->
    <div style="height: 100px;margin-left: 20px">
      <el-row :gutter="10">
        <el-col span="2">
          <div style="width: 200px">
            <el-input
                v-model="pageData.username"
                :prefix-icon="User"
                class="w-50 m-2"
                placeholder="根据用户名查询"
                size="large"

            />
          </div>
        </el-col>
        <el-col span="2">
          <div style="width: 200px">
            <el-input
                v-model="pageData.phone"
                :prefix-icon="User"
                class="w-50 m-2"
                placeholder="根据手机号查询"
                size="large"
            />
          </div>
        </el-col>
        <el-col span="2">
          <div style="width: 200px">
            <el-input
                v-model="pageData.nickname"
                :prefix-icon="User"
                class="w-50 m-2"
                placeholder="根据昵称查询"
                size="large"
            />
          </div>
        </el-col>
        <el-col span="2">
          <div>
            <el-button size="large" type="primary" @click="select">
              查询
            </el-button>
          </div>
        </el-col>
      </el-row>
    </div>

    <!--    上课记录-->

    <!--  列表-->
    <el-table
        :data="list"
        style="width: 100%"
        width="100%"
        @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"/>
      <el-table-column :index="index=> index+1 " label="序号" type="index" width="60"/>
      <el-table-column label="昵称" prop="nickname" width="100"/>
      <el-table-column label="用户名" prop="username" width="100"/>
      <el-table-column #default="{row}" label="头像" width="180">
        <el-image :src=row.headUrl style="width: 100px; height: 100px"/>
      </el-table-column>
      <el-table-column label="手机号" prop="phone" width="180"/>
      <el-table-column label="邮箱" prop="email" width="180"/>
      <el-table-column #default="{row}" label="拥有课程" width="100">
        <div v-if="row.courses.length==0">
          暂无
        </div>
        <div v-for="itm in row.courses ">
          <p>{{ itm.name }}</p>
        </div>
      </el-table-column>
      <el-table-column #default="{row}" label="状态" width="100">
        <el-button link @click="userStatus(row.id,row.status)">
          <div v-if="row.status==0">
            <svg class="icon" height="48" p-id="3203" t="1688664248045" version="1.1"
                 viewBox="0 0 1792 1024" width="48" xmlns="http://www.w3.org/2000/svg">
              <path d="M320 192h1152a320 320 0 0 1 0 640H320A320 320 0 0 1 320 192z" fill="#07A35A" p-id="3204"></path>
              <path d="M1280 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#FFFFFF" p-id="3205"></path>
            </svg>
          </div>
          <div v-else>
            <svg class="icon" height="32" p-id="6304" t="1688664490456" version="1.1"
                 viewBox="0 0 1024 1024" width="32" xmlns="http://www.w3.org/2000/svg">
              <path
                  d="M764.867148 249.793136 259.0735 249.793136c-143.070486 0-259.052011 115.984594-259.052011 259.052011 0 143.07151 115.982548 259.050987 259.052011 259.050987l505.793648 0c143.067416 0 259.050987-115.979478 259.050987-259.050987C1023.917112 365.778754 907.933541 249.793136 764.867148 249.793136zM259.0735 745.516428c-130.501216 0-236.671281-106.172111-236.671281-236.671281 0-130.501216 106.170065-236.671281 236.671281-236.671281S495.744781 378.344954 495.744781 508.84617C495.744781 639.34534 389.574716 745.516428 259.0735 745.516428z"
                  fill="#272636" p-id="6305"></path>
            </svg>
          </div>

        </el-button>


      </el-table-column>
      <el-table-column #default="{row}" label="操作" width="100">
        <el-row :gutter="20">
          <el-col :span="10">
            <EditComponent :id="row.id" :page="getPage"/>
          </el-col>
          <el-col :span="10">
            <el-button :icon="Delete" size="small" type="danger" @click="remove(row.id)"/>
          </el-col>
        </el-row>
      </el-table-column>
    </el-table>
    <!--  分页-->
    <div style="margin-left: 10px">
      <el-pagination
          v-model:current-page="pageData.pageNum"
          v-model:page-size="pageData.pageSize"
          :background="background"
          :total="pageData.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>


